<template>
  <!-- 医院分页列表与搜索 -->
  <div class="SearchAndPageList">
    <!-- 搜索框 -->
    <div class="searchIpt_container">
      <el-input
        class="searchIpt"
        v-model="searchInputVal"
        placeholder="请输入医院名称"
        type="text"
      >
        <!-- 搜索框内按钮 -->
        <template #append>
          <el-button
            class="searchIpt_btn"
            type="primary"
            icon="Search"
            @click="findByHosname"
          ></el-button>
        </template>
      </el-input>
    </div>
    <!-- 分页列表 -->
    <div class="pageList_container">
      <!-- 左侧医院列表 -->
      <div class="left">
        <!-- 医院 -->
        <div class="wrapper">
          <div class="title">医院</div>
          <div class="list-group">
            <div class="list-item"></div>
          </div>
        </div>
        <!-- 等级 -->
        <div class="wrapper">
          <div class="title">等级:</div>
          <div class="list-group">
            <div :class="`list-item ${hostype==''?'active':''}`" @click="chooseHostype" data-value="">全部</div>
            <div :class="`list-item ${hostype==`${item.value}`?'active':''}`" @click="chooseHostype" v-for="item in hosLevel" :key="item.id" :data-value="item.value">
              {{ item.name }}
            </div>
          </div>
        </div>
        <!-- 地区 -->
        <div class="wrapper">
          <div class="title">地区:</div>
          <div class="list-group">
            <div :class="`list-item ${districtCode==''?'active':''}`"  @click="chooseDistrictCode" data-value="">全部</div>
            <div :class="`list-item ${districtCode==`${item.value}`?'active':''}`"  @click="chooseDistrictCode" v-for="item in hosPlace" :key="item.id" :data-value="item.id">
              {{ item.name }}
            </div>
          </div>
        </div>
        <!-- 医院详情列表 -->
        <div class="hospital_List">
          <!-- 单项医院 -->
          <el-card
            class="card_wrapper"
            v-for="item in hosListByPage"
            :key="item.id"
            shadow="hover"
            @click="navigatorToDetail(item.hoscode)"
          >
            <!-- 左侧 信息 -->
            <div class="left_card_wrapper">
              <div class="card_title">{{ item.hosname }}</div>
              <div class="card_content">
                <div class="card_content_left">
                  <el-icon style="font-size: 12px"><Star /></el-icon>
                  {{ (item?.param?.hostypeString)?(item?.param?.hostypeString):'---' }}
                </div>
                <div class="card_content_right">
                  <el-icon style="font-size: 12px"><Clock /></el-icon>
                  每天{{ (item?.bookingRule?.releaseTime)? (item?.bookingRule?.releaseTime):'---'}}放号
                </div>
              </div>
            </div>
            <!-- 右侧 医院logo -->
            <div class="right_card_wrapper">
              <img :src="`data:image/*;base64,${item?.logoData}`" />
            </div>
          </el-card>
        </div>
        <!-- 分页 -->
        <div class="el-pagination">
          <el-pagination
            :current-page="page"
            :total="totalElements"
            :page-size="limit"
            :page-sizes="[ 10, 20, 30]"
            style="padding: 20px 0"
            layout="prev, pager, next, jumper, ->, sizes, total"
            @current-change="changePage"
            @size-change="changeSize"
          ></el-pagination>
        </div>
      </div>
      <!-- 右侧sidbar -->
      <div class="right">
        <RightWapper01 />
        <RightWapper02 />
        <RightWapper03 />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import {useRouter} from "vue-router"
//引入右侧通知栏组件
import RightWapper01 from "./components/rightWapper01.vue";
import RightWapper02 from "./components/rightWapper02.vue";
import RightWapper03 from "./components/rightWapper03.vue";
//引入分页组件
// import Pagination from "./components/Pagination.vue";
export default defineComponent({
  name: "SearchAndPageList",
});
</script>

<script lang="ts" setup>
import { reqHosListByPage, reqHosLevel, reqHosPlace,reqFindByHosname } from "@/api/home";
import type {
  typeHosListByPageContent,
  typeHosLevelItem,
  typeHosPlaceResponse,
} from "@/api/home";
//数据1:首页搜索框绑定值
const searchInputVal = ref("");
//数据2:医院分页列表
const hosListByPage = ref<typeHosListByPageContent[]>([]);
//数据3:医院等级列表
const hosLevel = ref<typeHosLevelItem[]>([]);
//数据4:地区列表
const hosPlace = ref<typeHosPlaceResponse>([]);
//数据5：总页数
// const totalPages = ref(0);
//数据6：当前页
const page = ref(1);
//数据7：每页条数
const limit = ref(10);
//数据8：总条数
const totalElements = ref(0);
//数据9: active选中状态
// const isActive = ref("");
//数据10:选中的医院等级
const hostype = ref("");
//数据11:选中的地区
const districtCode = ref("");

//获取路由对象
const router = useRouter()

//方法1:获取医院分页列表
const getHosListByPage = async () => {
  try {
    const result = await reqHosListByPage(page.value, limit.value,{hostype:hostype.value,districtCode:districtCode.value});
    console.log("分页列表", result);
    //分页列表
    hosListByPage.value = result.content;
    //总条数(接口有问题)
    totalElements.value = result.totalElements;
  } catch (error) {
    console.log("请求医院分页列表失败");
  }
};
//方法2:获取医院等级列表
const getHosLevel = async () => {
  try {
    const result = await reqHosLevel();
    console.log("医院等级", result);
    hosLevel.value = result;
  } catch (error) {}
};
//方法3:获取地区列表
const getHosPlace = async () => {
  try {
    const result = await reqHosPlace();
    console.log("地区列表", result);
    hosPlace.value = result;
  } catch (e) {}
};
//方法4:改变当前页page函数
const changePage = (res: number) => {
  console.log("当前页", res);
  page.value = res;
  //重新获取分页列表
  getHosListByPage()
};
//方法5:改变每页条数limit 函数
const changeSize = (size:number) =>{
  console.log("每页条数",size);
  //回到第一页
  page.value = 1
  limit.value = size;
  //重新获取分页列表
  getHosListByPage()
}
//方法6:根据搜索内容获取医院分页列表
const findByHosname = async() =>{
  console.log("搜索");
  try {
    page.value = 1 //回到第一页搜索
    hostype.value = ''; //等级回到全部
    districtCode.value = ''//地区回到全部
    const result = await reqFindByHosname(searchInputVal.value)
    console.log("方法6",result);
    hosListByPage.value = result
    totalElements.value = result.length //总条数为数组长度
  } catch (error) {
    
  }
  
}
//方法7:医院等级 点击事件
const chooseHostype = (e:any) =>{
  console.log("方法7",(e.target as HTMLInputElement).dataset.value);
  const val = (e.target as HTMLInputElement).dataset.value
  //把当前点击 的自定义属性保存
  hostype.value = val as string

  if(val===''){
    //点击的全部
    hostype.value = ''
    page.value = 1
    getHosListByPage()
  }else{
    page.value = 1
    getHosListByPage()
  }
}
//方法8:地区点击事件
const chooseDistrictCode = (e:any) =>{
  console.log("方法8",(e.target as HTMLInputElement).dataset.value);
  const val = (e.target as HTMLInputElement).dataset.value
  //把当前点击 的自定义属性保存
  districtCode.value = val as string

  if(val===''){
    //点击的全部
    districtCode.value = ''
    page.value = 1
    getHosListByPage()
  }else{
    page.value = 1
    getHosListByPage()
  }
}
//方法9：单项医院点击事件 -跳转到详情页
const navigatorToDetail = (id:string) =>{
  console.log("跳转");
  router.push({
    path:`/hospital`,
    query:{
      code:id
    }
  })
}

onMounted(() => {
  //初始化1:获取医院分页列表
  getHosListByPage();
  //初始化2:获取医院等级列表
  getHosLevel();
  //初始化3:获取地区列表
  getHosPlace();
});
</script>

<style scoped>
.SearchAndPageList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
/* 搜索框 */
.SearchAndPageList .searchIpt_container {
  width: 800px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.SearchAndPageList .searchIpt_container .searchIpt {
  height: 43px;
}
.SearchAndPageList .searchIpt_container .searchIpt .searchIpt_btn {
  height: 45px;
  width: 60px;
  background-color: #409eff;
  color: #fff;
}
/* 分页列表 */
.pageList_container {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 左 */
.pageList_container .left {
  min-height: 500px;
  width: 960px;
  /* background-color: pink; */
}
.pageList_container .left .wrapper {
  width: 100%;
  padding: 0;
  margin-bottom: 15px;
  display: flex;
  color: #7f7f7f;
}
.pageList_container .left .wrapper .title {
  width: 40px;
  margin-right: 10px;
  font-size: 14px;
}
.pageList_container .left .wrapper .list-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.pageList_container .left .wrapper .list-group .list-item {
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
/* 医院详情列表 */
.pageList_container .left .hospital_List {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pageList_container .left .hospital_List .card_wrapper {
  display: flex;
  justify-content: space-between;
  width: 470px;
  height: 100px;
  margin-bottom: 10px;
  cursor: pointer;
}
.pageList_container .left .hospital_List .card_wrapper >>> .el-card__body {
  width: 100%;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.pageList_container .left .hospital_List .left_card_wrapper {
  height: 100%;
  width: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pageList_container .left .hospital_List .left_card_wrapper .card_title {
  font-size: 16px;
}
.pageList_container .left .hospital_List .card_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7f7f7f;
}
.pageList_container .left .hospital_List .card_content .card_content_left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7f7f7f;
}

.pageList_container .left .hospital_List .right_card_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
}
.pageList_container .left .hospital_List .right_card_wrapper img {
  border-radius: 40px;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.active {
  color: #409eff;
}

/* 右 */
.pageList_container .right {
  width: 200px;
  /* background-color: #409eff; */
  font-size: 14px;
}

</style>
